// 添加大咖弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message,Spin ,Checkbox } from 'antd'
import { connect } from 'react-redux'
import {addMaster,editMaster,getCompanyTypeList,searchcompanyList} from 'actions/userConter'
import {getbasetypefetch} from 'actions/common'
import Uploadimg from '../../components/uploadimg'
const FormItem = Form.Item
import ReactCoreImageUpload  from 'react-core-image-upload';
@Form.create({
    mapPropsToFields(props) {

        return {
          realName: Form.createFormField({
            ...props.content,
            value: props.content.realName,
          }),
          domain: Form.createFormField({
            ...props.content,
            value: props.content.domain,
          }),
          companyName: Form.createFormField({
            ...props.content,
            value: props.content.companyName,
          }),
          positionName: Form.createFormField({
            ...props.content,
            value: props.content.positionName,
          }),
          mobile: Form.createFormField({
            ...props.content,
            value: props.content.mobile,
          }),
          professionalAblity: Form.createFormField({
            ...props.content,
            value: (
                ()=>{
                    var CheckboxValue = props.content.professionalAblity?props.content.professionalAblity:[];
                    var CheckboxValueArry = []
                    for(var i = 0;i<CheckboxValue.length;i++){
                        CheckboxValueArry.push(CheckboxValue[i].code)
                    }
                    return CheckboxValueArry
                }
            )(),
          }),
          aboutMaster: Form.createFormField({
            ...props.content,
            value: props.content.introduce,
          }),
    
        };
    } 
})

@connect(
    (state, props) => ({
      config: state.config,
    })
)

export default class ModalAddMaster extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        addModalFlg:false,
        addUserImg:"",//添加大咖-用户头像上传接收的路径
        loading:false,    
        CheckboxList:[],
        companyList:[],//公司列表
        lookcompanyList:[],//模糊查询列表
        imageflag: false,
        CheckboxValue:[],//默认选中的复选框
      }
    }
    componentWillMount(){
        this.setState({
            addUserImg:this.props.content.headImage,
        })
    }
    componentDidMount() {
        this.props.dispatch(getbasetypefetch(
            {"type":17},
            (respose) => {
                this.setState({
                    companyList:respose.respData.resultData
                })
        }))
        this.props.dispatch(getbasetypefetch(
            {"type":10},
            (respose) => {
                this.setState({
                    CheckboxList:respose.respData.resultData
                })
        }))
        
    }
    imageuploaded() {
          this.setState({
            imageflag:true
          });
      }
    closeFn(){
        this.setState({
            imageflag:false
          });
    }
    urlFn(url){
        this.setState({
            imageflag:false,
            addUserImg:url
          });
    }
    addSubmit(callback,e){//新增确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                //提交信息接口
                if(!this.state.addUserImg){
                    message.error('请上传用户头像');
                    return;
                }
                if(this.props.type == 1){
                    const datajson = {
                        "imageFile":this.state.addUserImg,//公司头像
                        "realName":values.realName,//用户姓名
                        "companyName":values.companyName,//	公司名称
                        "domain":values.domain,//所属领域
                        "positionName":values.positionName,//公司职位
                        "mobile":values.mobile,//手机号码
                        "introduce":values.aboutMaster,//关于大咖
                        "professionalAblity":values.professionalAblity
                    }
                    this.props.dispatch(addMaster(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.ModalCancel();
                            this.setState({
                                addUserImg:""
                            })
                    }))
                }else{
                    const datajson = {
                        "accountId":this.props.content.accountId,//用户ID
                        "id":this.props.content.bigShotId,//大咖ID
                        "imageFile":this.state.addUserImg,//公司头像
                        "realName":values.realName,//用户姓名
                        "companyName":values.companyName,//	公司名称
                        "domain":values.domain,//所属领域
                        "positionName":values.positionName,//公司职位
                        "mobile":values.mobile,//手机号码
                        "introduce":values.aboutMaster,//关于大咖
                        "professionalAblity":values.professionalAblity
                    }
                    this.props.dispatch(editMaster(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.ModalCancel();
                            this.setState({
                                addUserImg:""
                            })
                    }))
                }                          
            }
        });
    }
    render () {
        const {form } = this.props
        const { getFieldDecorator } = form;
        const CheckboxGroup = Checkbox.Group;
        const uploadImg = {
            name: 'file',
            action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"1"
            },
            accept:"image/jpg,image/png,image/jpeg",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'image';
              if (!isImg) {
                message.error('请选择图片');
              }
              this.setState({
                loading:true
              })
              return isImg;
            },
            onChange:(info)=>{
              if (info.file.status !== 'uploading') {
              }
              if (info.file.status === 'done') {
                /* 把返回的路径赋值过去 */
                this.setState({
                  addUserImg: info.file.response.respData,
                  loading:false
                })
              } else if (info.file.status === 'error') {
                message.error(info.file.response.respMsg);
              }
            },
            showUploadList:false,//不展示上传完成之后的文件列表
        }
        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 4 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 16 },
            },
        };
        return (
            //添加大咖弹窗
            <Modal
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增大咖" : "编辑大咖" }
                onCancel={this.props.ModalCancel}
                footer={[
                <Button key="submit" type="primary"  onClick={this.addSubmit.bind(this,this.props.callback)}>提交</Button>,
                ]}
            >
                <Form>
                    <FormItem label="用户头像" {...formItemLayout}> 
                        <Spin spinning={this.state.loading} style={{width:"80px"}}>
                        <img onClick={this.imageuploaded.bind(this)} style={{width:"80px",height:"80px",verticalAlign:"bottom",marginRight:"10px"}} 
                            src={this.state.addUserImg ? this.state.addUserImg :require('../../images/baseHeader.png')}
                        />
                        </Spin>
                        {
                            this.state.imageflag?
                            <Uploadimg width={200} height={200} visible={this.state.imageflag} closeModal={this.closeFn.bind(this)} urlFn={this.urlFn.bind(this)}/>
                            :''                        
                        }
                    </FormItem>
                    <FormItem label="专业能力" {...formItemLayout} style={{display:'flex',alignItems:'center'}}>
                        {
                            getFieldDecorator('professionalAblity', {
                                rules: [{
                                    required: true,message:"此项必填"
                                }],
                            })(
                            <CheckboxGroup>
                                {
                                  this.state.CheckboxList.map((item,i)=> {
                                    return(
                                      <Checkbox style={{marginLeft:"8px"}} value={item.code} key={i} >{item.value}</Checkbox>
                                    )
                                  })
                                }
                            </CheckboxGroup>
                            )
                        }      
                    </FormItem>
                    <FormItem label="用户姓名" {...formItemLayout}>
                        {
                        getFieldDecorator('realName', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="所属领域" {...formItemLayout}>
                        {
                        getFieldDecorator('domain', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Select placeholder="请选择所属领域" style={{ width:120 }}>
                                {
                                this.state.companyList.map((item,i)=> {
                                    return(
                                        <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                                    )
                                })
                                }
                            </Select>
                        )
                        }      
                    </FormItem>
                    <FormItem label="所属公司" {...formItemLayout}>
                        {
                        getFieldDecorator('companyName', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入所属公司" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="公司职位" {...formItemLayout}>
                        {
                        getFieldDecorator('positionName', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input placeholder="请输入关键字" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="手机号码" {...formItemLayout}>
                        {
                        getFieldDecorator('mobile', {
                            rules: [
                                {
                                    validator(rules, value, callback){                          
                                        if (!value) {
                                            callback(new Error('请输入联系电话'));
                                        }else if(/\D/g.test(value)){
                                            callback(new Error('请输入正确的联系电话'));
                                        }else{
                                            callback();
                                        }
                                    }
                                }
                            ],
                        })(
                            <Input type="number" placeholder="请输入关键字"  maxLength="11" size="default" style={{ width: '200px' }} />
                        )
                        }      
                    </FormItem>
                    <FormItem label="关于大咖" {...formItemLayout}>
                        {
                        getFieldDecorator('aboutMaster', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Input.TextArea placeholder="请输入关键字" size="default" style={{ width: '400px',height:'100px', resize:'none' }} />
                        )
                        }      
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}